<template>
  <el-card>
    <el-form :inline="true" :model="queryParam" ref="queryParam" :rules="rules" label-width="50px" class="demo-ruleForm">
      <el-form-item
        label="部门名称："
        prop="departName"
      >
        <el-input placeholder="请输入部门名称" v-model="queryParam.departName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('queryParam')">搜索</el-button>
        <el-button @click="resetForm('queryParam')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%">

      <el-table-column
        fixed
        prop="departName"
        label="部门名称"
        width="100">
      </el-table-column>
      <el-table-column
        fixed
        prop="status"
        label="状态"
        width="50">
      </el-table-column>
      <el-table-column
        fixed
        prop="createTime"
        label="创建时间"
        :formatter="dateBir"
        width="120">
      </el-table-column>
      <el-table-column
        fixed
        prop="updateTime"
        label="更新时间"
        :formatter="dateBir"
      >
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="170">
        <template slot-scope="scope">
          <el-button @click="sendWant(scope.row,'check')" type="text" style="margin-left: 16px;">查看</el-button>
          <el-button @click="sendWant(scope.row,'update')" type="text" size="medium">编辑</el-button>
          <el-popconfirm
            title="确定删除吗？" placement="top-start"
          >
            <el-button type="text" slot="reference" style="color: red; margin-left: 10px"  size="medium" >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageInfo">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
    <Drawer v-bind:want = check v-bind:sendOneToDrawer = sendData></Drawer>
  </el-card>
</template>

<script>
    import {getPageSizeInfoUtil} from "../../utils/UtilsManager";
    import {getAction} from "../../axios/HttpUtils";

    import moment from "moment";

    export default {
        name: "table.vue",
        components:{
          Drawer
        },
        data(){
          return{
            drawer:false,
            direction: 'rtl',
            pageSize: 10,
            pageNo: 1,
            pageTotal: 200,
            pageSizes: null,
            queryParam: {

            },
            tableData: []
          }
        },
      created() {
        let pageSizeInfo = getPageSizeInfoUtil();
        this.pageSizes = pageSizeInfo;
        this.loadData();
      },
      methods:{
        dateBir(row, column, cellValue, index) {
          if(cellValue == null){
            return "暂不显示"
          }else {
            return  moment(cellValue).format("YYYY年MM日DD");
          }
        },
        handleSizeChange(pageSize) {
          this.pageSize = pageSize;
          this.loadData();
          console.log(`每页 ${pageSize} 条`);
        },
        handleCurrentChange(pageNo) {
          this.pageNo = pageNo;
          this.loadData();
          console.log(`当前页: ${pageNo}`);
        },
        loadData() {
          let params = {};
          params.departName = this.queryParam.departName;
          params.pageNo = this.pageNo;
          params.pageSize = this.pageSize;
          getAction("/user/queryAllDepartDetail", params).then(res =>{
            if(res.code == 200){
              console.log(res.result);
              this.tableData = res.result.records;
              this.pageTotal = res.result.total;
              this.pageNo = res.result.current;
            }

          })
        },
        submitForm(formName) {

          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.loadData();
            } else {
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
          this.loadData();
        }
      }
    }
</script>

<style scoped>
  .pageInfo {
    margin-top: 10px;
    text-align: right;
  }
</style>
